<template>
  <div class="">
    <div class="search">
      <header>
        <i class="iconfont icon-arrow-left" @click="back"></i>
        <h3>菜谱搜索</h3>
      </header>
      <div class="searchOption">
        <div class="searchInput">
          <i class="iconfont icon-sousuoxiao"></i>
          <input @keydown.enter="listenInput" type="text" placeholder="搜索菜谱" />
        </div>
        <span @click="back">取消</span>
      </div>
    </div>
    <!--历史搜索  -->
    <div class="history">
      <div class="top1">
        <span>历史搜索</span>
        <i class="iconfont icon-shanchu" @click="delHisAction"></i>
      </div>
      <div class="list">
        <span v-for="(item, index) in list" :key="index" @click="keySearch(item, $event)">{{ item }}</span>
      </div>
    </div>
    <!-- 热门搜索 -->
    <div class="history">
      <div class="top1">
        <span>热门搜索</span>
      </div>
      <div class="list">
        <span v-for="(item, index) in list2" :key="index" @click="keySearch(item)">{{ item }}</span>
      </div>
    </div>
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
  </div>
</template>

<script>
import { getRecipeListApi } from "@/api/home";
import { Toast } from "vant"
export default {
  created() {
    this.getRecipeList()
    // 获取历史搜索记录
    this.list = JSON.parse(localStorage.getItem('hesList')) || []
  },
  methods: {
    async getRecipeList() {
      let { data } = await getRecipeListApi();
      this.recipeList = data.data
      console.log(data);
    },


    // 回车搜索数据
    listenInput(evt) {
      // str.match(/^[ ]*$/) 判断是否为空格
      if (evt.target.value.match(/^[ ]*$/) || !evt.target.value) {
        return
      }
      // 历史搜索记录
      this.list.unshift(evt.target.value)
      localStorage.setItem('hesList', JSON.stringify(this.list))
      // 筛选的数据
      this.searchRecipeList = this.recipeList.filter(item => item.title.includes(evt.target.value))

      console.log(this.recipeList);
      console.log(this.searchRecipeList);
      // 上传同步vuex仓库
      this.$store.commit('searchRecipe', this.searchRecipeList)
      // 跳转路由
      this.$router.push({ name: 'SearchCs' })
      if (this.searchRecipeList.length == 0) {
        Toast({
          message: "没有找到~~~",
          icon: "success",
        });
      }
    },
    // 点击关键字跳转搜索
    keySearch(key, e) {
      // console.log(e.target); 
      // console.log(key);
      this.searchRecipeList = this.recipeList.filter(item => item.title.includes(key))
      // 上传同步vuex仓库
      this.$store.commit('searchRecipe', this.searchRecipeList)
      // 跳转路由
      this.$router.push({ name: 'SearchCs' })
      if (this.searchRecipeList.length == 0) {
        Toast({
          message: "没有找到~~~",
          icon: "success",
        });
      }
    },
    // 删除搜索历史记录
    delHisAction() {
      localStorage.removeItem('hesList')
      this.list = []
    },
    back() {
      this.$router.back();
    },
  },
  data() {
    return {
      //历史搜索数据
      list: ["蛋糕", "冬瓜", "鱼",],
      // 热门搜索数据
      list2: [
        "减脂餐",
        "喝汤",
        "豆腐",
        "鸡翅",
        "牛肉",
        "鱼",
        "鸡蛋",
        "虾仁",
        "茄子",
        "白菜",
      ],
      // 菜谱总列表
      recipeList: [],
      searchRecipeList: [],
    };
  },
};
</script>

<style scoped lang="scss">
a {
  display: block;
  color: #323232;
  display: flex;
  flex-wrap: wrap;
}

.history {
  width: 90%;
  margin: 5px auto 20px;

  .top1 {
    display: flex;
    justify-content: space-between;

    span {
      color: #323232;
    }

    i {
      font-size: 16px;
      color: #999999;
    }
  }

  .list {
    font-size: 14px;
    margin-top: 25px;
    display: flex;
    flex-wrap: wrap;

    span {
      padding: 5px 18px;
      background: #f2f2f2;
      margin-right: 10px;
      border-radius: 25px;
      margin-bottom: 10px;
    }
  }
}

header {
  height: 50px;
  line-height: 50px;

  i {
    font-size: 18px;
    position: absolute;
    left: 20px;
  }

  h3 {
    text-align: center;
    font-weight: 700;
  }
}

.searchOption {
  padding: 0 20px 15px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;

  // margin-bottom: 15px;
  .searchInput {
    width: 85%;
    background-color: rgba(242, 242, 242, 1);
    position: relative;
    border-radius: 20px;

    i {
      color: #c0bbbb;
      padding-left: 20px;
    }

    input {
      width: 70%;
      height: 40px;
      border: none;
      outline: none;
      padding-left: 10px;
      background-color: rgba(242, 242, 242, 1);

      &::placeholder {
        font-size: 14px;
        // color: aqua;
      }
    }
  }

  span {
    font-size: 14px;
    color: #999999;
  }
}
</style>